<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>composition - watch watchEffect</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="root"></div>
	<script>
		// watch 监听器
		// watchEffect 监听器，偏向于effect
		const app = Vue.createApp({
			template:
			`<div>
				Name:<input v-model="name"/>
			</div>
			<div>
				Name is {{name}}
			</div>
			<div>
				EnglishName:<input v-model="EnglishName"/>
			</div>
			<div>
				EnglishName is {{EnglishName}}
			</div>	
			`,
			setup() {
				const {ref, watch, reactive, toRefs, watchEffect} = Vue
				const nameObj = reactive({name:'dell',EnglishName:'ha'})
				
				//监听多个 用数组
				// immediate 立即执行
				watch([()=> nameObj.name,()=> nameObj.EnglishName], ([currentValue,curEn ],[prevValue,prevEn])=>{
					console.log('name:',currentValue, prevValue,"------",'En:',curEn, prevEn)
				},{immediate:true})

				// const stoop1 =watch([()=> nameObj.name,()=> nameObj.EnglishName], ([currentValue,curEn ],[prevValue,prevEn])=>{
				// 	console.log('name:',currentValue, prevValue,"------",'En:',curEn, prevEn)
				// 		//取消监听器
				// 	setTimeout(()=>{
				// 		stop1()
				// 	},5000)
		
				// })
				
				// 立即执行，没有惰性 immediate
				// 不需要传递你要侦听的内容 ，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数
				// 不能获取之前数据的值

				// const stop = watchEffect(()=>{
				// 	console.log(nameObj.name)
				// 	//取消监听器
				// 	setTimeout(()=>{
				// 		stop()
				// 	},5000)
				// })


				const {name,EnglishName} = toRefs(nameObj)
				return {
					name,EnglishName
				}
			},
		})
		const vm = app.mount('#root');
	</script>
</body>
</html>